<template>
	<view class="content">
		<u-image src="https://cdn.uviewui.com/uview/swiper/2.jpg" width="100%" height="500rpx"></u-image>
		<view class="user">
			<u-row gutter="16" justify="space-between">
				<u-col span="3">
					<view>
						<u-avatar src="https://cdn.uviewui.com/uview/swiper/2.jpg" size="140" class="avatar"></u-avatar>
					</view>
				</u-col>
				<u-col span="9">
					<view>
						<text>点击授权</text>
						
						<view><u-tag text="铜牌会员" shape="circle" size="mini" type="error" mode="dark"/></view>
					</view>
				</u-col>
			</u-row>
			<view>
				<u-grid :col="3" :border="false">
					<u-grid-item v-for="(item,index) in list">
						<text>{{item.val}}</text>
						<view>{{item.name}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[{
					val: 0,
					name: '优惠券'
				},{
					val: 0,
					name: '积分'
				},{
					val: 0,
					name: '积分'
				}]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.user{
		position: relative;
		z-index: 999;
		background: #FFFFFF;
		height: 300rpx;
		margin: 0rpx 20rpx;
		margin-top: -50rpx;
		border-radius: 15rpx;
		padding: 20rpx;
		box-shadow:0px 0px  10px 0px #e4e7ed;
	}
	.avatar{
		margin-top: -50rpx;
		border: 8rpx solid #FFFFFF;
		box-shadow:0px 0px  10px 0px #e4e7ed;
	}
	.lists{
		margin-top: 20rpx;
		text-align: center;
	}
</style>
